import { View, Icon } from "@tarojs/components";
import clsx from "clsx";
import { useCallback } from "react";

export default function Index() {
  const vary = useCallback((current: number, prev = 0) => {
    let value = current - prev;
    return (
      <View className="flex items-center">
        {value > 0 && (
          <Icon size={20} type="download" className="rotate-180 opacity-85" />
        )}
        {value < 0 && <Icon size={20} type="download" color="red" />}
        {Math.abs(value)}
      </View>
    );
  }, []);

  return (
    <>
      <View className="font-semibold text-lg sticky top-0 bg-white p-4 z-10">
        城乡居民医保保费
      </View>
      <View className="px-4">
        <View className="flex border-b border-gray-600 py-1">
          <View className="w-20">年份</View>
          <View className="flex-1">保费</View>
          <View className="flex items-center">涨幅</View>
        </View>
        {data.map((d, k, arr) => (
          <View
            key={k}
            className={clsx("flex py-1", {
              "border-b border-gray-400": k < data.length - 1,
            })}
          >
            <View className="w-20">{d.date}</View>
            <View className="flex-1">{d.fee}元</View>
            {vary(d.fee, arr[k + 1]?.fee)}
          </View>
        ))}
      </View>
    </>
  );
}

const data = [
  { date: "2024", fee: 400 },
  { date: "2023", fee: 380 },
  { date: "2022", fee: 350 },
  { date: "2021", fee: 320 },
  { date: "2020", fee: 280 },
  { date: "2019", fee: 250 },
  { date: "2018", fee: 240 },
  { date: "2017", fee: 220 },
  { date: "2016", fee: 200 },
  { date: "2015", fee: 180 },
  { date: "2014", fee: 150 },
  { date: "2013", fee: 120 },
  { date: "2012", fee: 100 },
  { date: "2011", fee: 80 },
  { date: "2010", fee: 60 },
  { date: "2009", fee: 50 },
  { date: "2008", fee: 30 },
  { date: "2007", fee: 20 },
  { date: "2003", fee: 10 },
];
